<template>
  <el-row>
    <!-- Left Section -->
    <el-col :span="10">
      <div class="data_list">
        <el-card class="list-card">
          <div class="Purchase_Order">
            <p class="box_code">销售单号</p>
            <el-input
                class="dev_input"
                placeholder="请输入或扫码"
                suffix-icon="el-icon-saoma"
                v-model="device_input">
            </el-input>
            <el-button type="primary" class="dev_button" @click="show_outstock">确定</el-button>
          </div>
        </el-card>
        <el-card class="table_data" style="margin-top: 20px; height: auto">
          <div class="head">
            <h3 class="device_head"></h3>
          </div>
          <el-table :data="outstock_list" style="width: 100%" height="400px" highlight-current-row @current-change="handleCurrentChange" v-loading="loading1" :cell-style="cellStyle">
            <el-table-column v-for="(val, key) in outstock_label" :prop="key" :label="val" :key="key" :width="getColumnWidth(key)" :show-overflow-tooltip="true">
            </el-table-column>
          </el-table>
          <!-- 按钮 -->
          <div class="button-container">
            <el-button type="primary" class="dev_button" @click="show_outDevice">出库</el-button>
            <el-button class="dev_button cancel" @click="clear">取消</el-button>
          </div>
        </el-card>
      </div>
    </el-col>

    <!-- Right Section -->
    <el-col :span="14">
      <el-card class="device-detail-card">
        <el-empty v-if="!showDetail" description="暂无设备信息" style="height: 100vh">
          <template #image>
            <div class="custom-empty-content">
              <img src="https://img2.imgtp.com/2024/04/03/fhG64MFW.png"  class="custom-image">
            </div>
          </template>
        </el-empty>
        <!-- 显示详细信息 -->
        <div v-else>
          <!-- 在这里放置详细信息内容 -->
          <div class="input-card">
            <div class="row-bg">
              <el-row type="flex" justify="space-between">
                <el-col :span="6">
                  <div class="input-wrapper">
                    <span class="label">客户名称：</span>
                    <el-input v-model="form_clientName" placeholder="-" class="input-gray" :disabled="true" ></el-input>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="input-wrapper">
                    <span class="label">出库产品：</span>
                    <el-input v-model="form_outDevice" placeholder="-" class="input-gray" :disabled="true"></el-input>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="input-wrapper">
                    <span class="label">产品数量：</span>
                    <el-input v-model="form_productNum" placeholder="-" class="input-gray" :disabled="true"></el-input>
                  </div>
                </el-col>
              </el-row>
            </div>

            <div class="code-container">
              <div class="Registration_code">
                <p class="box_code">箱子唯一码</p>
                <el-input class="box_input" placeholder="请扫描箱子唯一码" suffix-icon="el-icon-saoma" v-model="box_input"></el-input>
                <el-button type="primary" class="dev_button" @click="check">出库</el-button>
              </div>
              <div class="Device_code">
                <p class="dev_code">设备唯一码</p>
                <el-input class="dev_input" placeholder="请输入设备唯一码" suffix-icon="el-icon-saoma" v-model="dev_input"></el-input>
                <el-button type="primary" class="dev_button" @click="dev_out">出库</el-button>
              </div>
            </div>
          </div>

          <el-table :data="outdevice_list" style="width: 100%" highlight-current-row v-loading="loading2">
            <el-table-column v-for="(val, key) in oudevice_label" :prop="key" :label="val" :key="key" :width="getColumnWidth(key)">
              <template v-slot:default="scope">
                {{ scope.row[key] }}
                <el-tag v-if="key === 'boxCode' && scope.row.boxCode!== '-' && key !== 'device'" type="danger" effect="plain">出箱</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {

    return {
      loading1: false,
      loading2: false,
      activeName:'first',
      token: '',
      showDetail: false, // 是否显示详细信息，默认为 false
      dialogVisible: false,
      device_input:'',
      selecteddevCode: '',
      selectedsaleCode:'',
      selectedclientName:'',
      selectedoutDevice:'',
      selectedproductNum:'',
      form_clientName:'',
      form_outDevice:'',
      form_productNum:'',
      check_devCode:'',
      check_boxId:'',
      box_input:'',
      dev_input:'',
      outdevice_list:[],
      oudevice_label:{
        index:"序号",
        devGuid:"设备唯一码",
        mfgTime:"入库时间",
        boxCode:"箱号",
        user:"操作员",
      },
      outstock_list:[],
      outstock_label:{
        index:"序号",
        saleCode: "销售单号",
        clientName:"客户名称",
        outDevice:"出库设备",
        productNum:"产品数量",
        devCode:'机型代码'
      },
      selectedSaleNo: '',
      selectedDevice: null,
      activeTab: 'first' // Add activeTab data property
    };
  },
  methods: {
    searchSaleNo() {
      // Search for device based on sale number and update selectedDevice
      this.selectedDevice = this.tableData.find(device => device.SaleNo === this.selectedSaleNo);
    },
    showDeviceInfo(device) {
      // Show detailed information of the selected device when clicked
      this.selectedDevice = device;
    },
    output_submit(){
      console.log("ok");
    },
    show_outstock(){
      if (!this.device_input) {
        this.$message({
          message: '输入框不能为空！',
          type: 'warning'
        });
        return; // 结束函数执行
      }
      this.loading1 = true;
      this.$axios.get('/api/Outstock/InfoBySaleCode',{
        params:{
          saleCode:this.device_input
        },
        headers:{
          'Accept': 'application/json',
          'Content-Type': "application/json;charset=UTF-8",
          'token':this.token
        }
      }).then(res=>{
        console.log(res.data);
        if(res.data.code === 0)
        {
          this.outstock_list=[];
          // 遍历响应中的body数组
          res.data.body.forEach(item=>{
            let newdata={
              index:item.index,
              saleCode:item.saleCode,
              clientName:item.clientName,
              outDevice: item.productName,
              productNum: `${item.outstockAmount}/${item.amount}`,
              devCode:item.devCode,
            };
            this.outstock_list.push(newdata);
          })
        }
        else if(res.data.code === -99)
        {
          this.$message({
            message: '登录已过期',
            type: 'error'
          });
          this.$router.push('/login');
        }
        else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          });
        }
        this.loading1 = false;
      }).catch(err=>{
        console.log(err);
        this.$message({
          message: err,
          type: 'error'
        });
      })
    },
    handleCurrentChange(val){
      this.storecode(val);
    },
    storecode(row){
      this.showDetail=true;
      this.selecteddevCode = row.devCode;
      this.selectedsaleCode = row.saleCode;
      this.selectedclientName = row.clientName;
      this.selectedoutDevice = row.outDevice;
      this.selectedproductNum = row.productNum;

      console.log("箱子编号",this.selecteddevCode)
      console.log("订单号",this.selectedsaleCode)
    },
    check() {
      if (!this.box_input) {
        this.$message({
          message: '输入框不能为空！',
          type: 'warning'
        });
        return; // 结束函数执行
      }
      this.$axios.get('/api/Box/InfoByGuid', {
        params: {
          boxGuid: this.box_input
        },
        headers: {
          'Accept': 'application/json',
          'Content-Type': "application/json;charset=UTF-8",
          'token': this.token

        }
      }).then(res => {
        console.log(res.data);
        // 遍历响应中的body数组
        this.check_devCode=res.data.body.devCode;
        this.check_boxId = res.data.body.boxId;
        this.box_out();
      })
    },
    show_outDevice(){
      this.loading2 = true;
      this.form_outDevice = this.selectedoutDevice;
      this.form_clientName = this.selectedclientName;
      this.form_productNum = this.selectedproductNum;
      this.$axios.get('/api/Device/SaleProductOutstockList',{
        params:{
          devCode:this.selecteddevCode,
          saleCode:this.selectedsaleCode
        },
        headers:{
          'Accept': 'application/json',
          'Content-Type': "application/json;charset=UTF-8",
          'token':this.token
        }
      }).then(res=>{
        console.log(res.data);
        if(res.data.code==1)
        {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          })
        }
        else if(res.data.code==0)
        {
          this.outdevice_list=[];
          let id = 1;
          // 遍历响应中的body数组
          res.data.body.data.forEach(item=> {
            let newdata = {
              index: id++,
              devGuid: item.devGuid,
              mfgTime: item.mfgTime,
              user: item.user,
              boxCode: this.ifnull(item.box_Record),
            };
            this.outdevice_list.push(newdata);
          })
        }
        else if(res.data.code === -99)
        {
          this.$message({
            message: '登录已过期',
            type: 'error'
          });
          this.$router.push('/login');
        }
        this.loading2 = false;
      }).catch(err=>{
        console.log(err);
        this.$message({
          message: err,
          type: 'error'
        });
      })
    },
    clear(){
      this.showDetail = false;
    },
    ifnull(item){
      if(item==null)
      {
        return '-';
      }
      else
      {
        return item.boxCode;
      }
    },
    dev_out(){
      if (!this.dev_input) {
        this.$message({
          message: '输入框不能为空！',
          type: 'warning'
        });
        return; // 结束函数执行
      }
      this.$axios.post(
          '/api//Outstock/RecordByDev',
          {
            saleCode: this.selectedsaleCode,
            devGuid: this.dev_input,
            devCode: this.selecteddevCode,
          },
          {
            headers: {
              'Accept': 'application/json',
              'Content-Type': "application/json;charset=UTF-8",
              'token': this.token
            }
          }
      ).then(res => {
            console.log(res.data)
            if(res.data.code==1)
            {
              this.$message({
                message: res.data.msg,
                type: 'warning'
              })
            }
            else if(res.data.code==0)
            {
              this.$message({
                message: '出库成功！',
                type: 'success'
              });
            }
            else if(res.data.code === -99)
            {
              this.$message({
                message: '登录已过期',
                type: 'error'
              });
              this.$router.push('/login');
            }
          }
      ).catch(error => {
        // 处理请求错误
        console.error('出库失败:', error);
      });
    },
    box_out(){
      this.$confirm('您确认将该箱的设备进行出库吗?','确认出库',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(()=>{
        if (!this.box_input) {
          this.$message({
            message: '输入框不能为空！',
            type: 'warning'
          });
          return; // 结束函数执行
        }
        if(this.check_devCode !=this.selecteddevCode)
        {
          this.$message({
            message: '箱号不匹配！',
            type: 'warning'
          });
        }
        else{
          this.$axios.post(
              '/api//Outstock/RecordByBox',
              {
                saleCode: this.selectedsaleCode,
                boxId: this.check_boxId,
                devCode: this.selecteddevCode,
              },
              {
                headers: {
                  'Accept': 'application/json',
                  'Content-Type': "application/json;charset=UTF-8",
                  'token': this.token
                }
              }
          ).then(res => {
                console.log(res.data)
                if(res.data.code==0)
                {
                  this.$message({
                    message: '出库成功！',
                    type: 'success'
                  });
                }
                else if(res.data.code === -99)
                {
                  this.$message({
                    message: '登录已过期',
                    type: 'error'
                  });
                  this.$router.push('/login');
                }
                else
                {
                  this.$message({
                    message: res.data.msg,
                    type: 'warning'
                  });
                }
              }
          ).catch(error => {
            // 处理请求错误
            console.error('出库失败:', error);
          });
        }
      }).catch(()=>{
        this.$message({
          message: '取消出库！',
          type: 'warning'
        });
      })
    },
    getColumnWidth(key) {
      // 返回不同列的宽度
      if (key === 'index') {
        return '50px'; // 设置boxCode列的宽度为150px
      }
    },
    cellStyle() {
      return {
        cursor: 'pointer'
      };
    }
  },
  created() {
    this.token = localStorage.getItem('token')
  },
};
</script>

<style  lang="less" scoped>
.list-card {
  height: 300px;

  .Purchase_Order {
    width: 400px;
    height: 200px;
    margin-left: 20px;
    display: flex;
    align-items: center; /* 垂直居中 */

    .box_code {
      font-size: 14px;
      color: #999999;
      width: 30%; /* 设置 p 元素的宽度比例 */
      margin-right: 2px; /* 设置 p 元素和 input 元素之间的间距 */
    }

    .box_input {
      width: 70%;
      flex: 2; /* 让输入框占满剩余空间 */
    }
  }
}


.dev_code {
  font-size: 14px;
  color: #999999;
  width: 20%; /* 设置 p 元素的宽度比例 */
  margin-right: 10px; /* 设置 p 元素和 input 元素之间的间距 */
}

.device_head::before {
  content: '待出库列表';
  display: inline; /* 将 display 属性设置为 inline */
  width: auto; /* 让宽度自适应文字长度 */
  padding-left: 10px; /* 可以调整文字与竖杠的间距 */
  border-left: 3px solid #409EFF; /* 使用边框来模拟竖杠 */
  margin-bottom: 10px;
}
.dev_input {
  width:70%;
}
.dev_button {
  margin-left: 10px;
}

.button-container {
  display: flex;
  justify-content: center; /* 将按钮水平居中 */
  margin-top: 10px;
}

.device-detail-card {
  margin-left: 10px;
  height: 800px;

  .input-card {
    margin-left: 10px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #ffffff;
  }

  .input-gray {
    background-color: #f9fafc; /* 设置文本框的背景颜色为浅灰色 */
  }

  .input-wrapper {
    display: flex;
    align-items: center;
    width: auto;
  }

  .label {
    flex-shrink: 0;
    width: 70px; /* 可根据需要调整宽度 */
    margin-right: 10px;
    white-space: nowrap; /* 不换行 */
  }

  .code-container {
    display: flex;
    justify-content: space-between; /* 在父容器中平均分配子元素的空间 */
    margin-bottom: 10px;
  }

  .Registration_code,
  .Device_code {
    flex: 1; /* 子容器等宽 */
    margin-top: 0px;
    margin-right: 20px; /* 为了增加子容器之间的间距，根据需要调整 */
  }
}




</style>